<!doctype html>
<html lang="en-US">
  <head>
    <title>辣椒炒肉图片裁剪器 - Stable Diffusion 专用版本</title>
    <meta charset="utf-8" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" type="text/css" href="css/meddon.css">
    <meta name="viewport" content="initial-scale=0.5, maximum-scale=1" />
    <meta name="robots" content="noindex">
    <meta name="description"
      content="辣椒炒肉图片裁剪器是一个灵活且易于使用的批量图片调整工具。
      它可以将多张图片调整为任意指定尺寸，并在必要时裁剪图片。这是一个在线工具，你无需在电脑上下载或安装。辣椒炒肉图片裁剪器完全免费使用，支持 Mac 和 Windows 系统。" />
    <link rel="shortcut icon" type="image/png" href="static/images/favicon.png" />
    <link rel="shortcut icon" href="static/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>

  <body>
    <nav class="d-flex align-items-center justify-content-between pt-3 fixed-top">
      <ul class="d-inline-block list-inline m-0">
        <li class="list-inline-item">
          <a class="logo mr-4" href="javascript:void(0)" onclick="birme.show_section('main')">辣椒炒肉</a>
        </li>
        <li class="list-inline-item">
          <a class="nav-link" href="javascript:void(0)" onclick="birme.show_section('about')">关于辣椒炒肉图片裁剪器</a>
        </li>
      </ul>
    </nav>

    <div class="section section-main">
      <div class="preview-left">
        <div class="tiles-holder"></div>
        <div class="welcome">
          <div class="text-center w-50">
            <h1>批量图片大小调整工具2.1</h1>
            <h4 class="mb-4 d-none"><b>BIRME</b> - <b>B</b>ulk <b>I</b>mage <b>R</b>esizing <b>M</b>ade <b>E</b>asy 2.0</h4>
            <p>辣椒炒肉图片裁剪器是一个灵活且易于使用的批量图片调整工具。它可以将您的图片调整为任意指定尺寸，并在必要时按比例裁剪。它是一个在线工具，您无需下载或安装到电脑上。辣椒炒肉图片裁剪器完全免费使用。</p>
            <div class="icon icon-drag"></div>
            <p class="pb-0 mb-2 text-uppercase">拖拽您的图片到这里</p>

            <div class="small">- OR -</div>
            <div class="btn-browse btn btn-primary">
              <input type="file" id="file-1" class="inputfile" multiple onchange="birme.add_all(event)" />
              <label><span>从您的电脑上选择文件</span></label>
            </div>

            <p class="mt-4"><a href="https://www.bilibili.com/video/BV1H5fYYUEoy/?vd_source=6bfaf74d3a14675a3ed0cd00c4a8a991">(点击此处获取图片打标软件)</a></p>
            <p class="mt-4"><a href="https://api.cursorai.art/register?aff=xoXg">(点击此处获取中转API--一元一刀，稳定使用ChatGPT、Claude、Deepseek、豆包等全系列模型)</a></p>
          </div>
        </div>
        <div class="btn-browse btn btn-primary">
        <input type="file" id="file-1" class="inputfile" multiple onchange="birme.add_all(event)" />
        <label><span>添加更多文件</span></label>
      </div>
    </div>
    <div class="panels">
      <div class="panel panel-resize show">
        <button type="button" onclick="config.toggle_panel(this)" class="btn btn-toggle">调整大小/裁剪</button>
        <!-- Resize by pixel -->

        <div class="options-holder " style="display: block">
          <div class="width-input">
            <div class="width-height mr-5">
              <label for="target_width">宽度</label>
              <input type="number" id="target_width" min="1" onchange="config.update(this)" /> px
            </div>
            <label><input tabindex="-1" type="checkbox" id="auto_width" onchange="config.update(this)" /> 自动图片宽度</label>
          </div>
          <div class="height-input mt-2">
            <div class="width-height mr-5">
              <label for="target_width">高度</label>
              <input type="number" id="target_height" min="1" onchange="config.update(this)" /> px
            </div>
            <label><input tabindex="-1" type="checkbox" id="auto_height" onchange="config.update(this)" /> 自动图片高度</label>
          </div>
          <div class="height-input mt-2 ratio">
            <div class="width-height mr-5">
              <label for="target_width">比率</label>
              <input id="ratio_w" type="number" class="w-25" onchange="config.update_ratio()"></input> :
              <input id="ratio_h" class="w-25" type="number" onchange="config.update_ratio()"></input>
            </div>
          </div>
          <div class="crop-auto mt-2 d-none">
            <input type="checkbox" onchange="config.update(this)" id="auto_focal" />
            <label for="auto_focal">自动检测图像聚焦点</label>
          </div>
          <div class="crop-align mt-4 d-none">
            <div class="anchor-points mx-auto">
              <div data-n="0" onclick="config.set_focal(this)"></div>
              <div data-n="1" onclick="config.set_focal(this)"></div>
              <div data-n="2" onclick="config.set_focal(this)"></div>
              <div data-n="3" onclick="config.set_focal(this)"></div>
              <div data-n="4" onclick="config.set_focal(this)"></div>
              <div data-n="5" onclick="config.set_focal(this)"></div>
              <div data-n="6" onclick="config.set_focal(this)"></div>
              <div data-n="7" onclick="config.set_focal(this)"></div>
              <div data-n="8" onclick="config.set_focal(this)"></div>
              <div data-n="9" onclick="config.set_focal(this)"></div>
            </div>
            <div class="mt-2 text-center">设定图片聚焦点</div>
          </div>
          <label class="no-resize"><input tabindex="-1" type="checkbox" id="no_resize" onchange="config.update(this)" /> 不调整大小</label>
        </div>
      </div>
      <!-- BORDER  -->
      <div class="panel">
        <div class="d-flex">
          <button type="button" onclick="birme.show_modal('wm')" class="btn btn-wm w-50 mr-1">水印</button>
          <button type="button" onclick="config.toggle_panel(this.parentNode)" class="btn btn-toggle w-50">边框</button>
        </div>

        <div class="options-holder">
          <div class="border-options d-flex justify-content-between">
            <div>
              颜色:
              <input type="color" id="border_color" onchange="config.update(this)" />
            </div>
            <div>
              宽度:
              <input type="number" id="border_width" onchange="config.update(this)" />
            </div>
          </div>
        </div>
      </div>
      <div class="panel">
        <button type="button" onclick="config.toggle_panel(this)" class="btn btn-toggle">图像格式与质量</button>
        <div class="options-holder">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
              <label for="quality_preset_select">质量预设: </label>
              <select type="select" name="quality_preset_select" id="quality_preset" onchange="config.update(this)">
                <option value="disabled">禁用</option>
                <option value="low">低</option>
                <option value="medium">中</option>
                <option value="high" selected>高</option>
                <option value="hermite">Hermite</option>
              </select>
            </div>
          </div>
          <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
              <input type="radio" name="image_format" id="image_format_preserve" value="preserve" onchange="config.update(this)" />
              <label for="image_format_preserve">与原图相同</label>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
              <input type="radio" name="image_format" id="image_format_jpeg" value="jpeg" onchange="config.update(this)" />
              <label for="image_format_jpeg">JPEG</label>
            </div>
            <div>质量 <input type="number" min="10" id="quality_jpeg" onchange="config.update(this)" />%</div>
          </div>

          <div class="d-flex justify-content-between align-items-center">
            <div>
              <input type="radio" name="image_format" id="image_format_webp" value="webp" onchange="config.update(this)" />
              <label for="image_format_webp">WEBP</label>
            </div>
            <div>质量 <input type="number" min="10" id="quality_webp" onchange="config.update(this)" />%</div>
          </div>
          <!-- <a href="https://www.birme.net/blog/best-jpeg-quality-for-bulk-image-resizing/" target="_blank">Need Help?</a> -->
        </div>
      </div>

      <!-- RENAME -->
      <div class="panel">
        <button type="button" onclick="config.toggle_panel(this)" class="btn btn-toggle">重命名</button>

        <div class="options-holder">
          文件名模式，例如 image-xxx<br/> 或 ORIGINAL-NAME_400x400
          <input type="text" id="rename" onchange="config.update(this)" />
          <br />
          <br />
          文件名起始编号
          <input type="number" id="rename_start" onchange="config.update(this)" class="w-100" />
        </div>
      </div>
      <div class="save-btns d-flex mb-2">
        <div class="w-50 pr-1">
          <button type="button" class="btn btn-primary btn-sm w-100 mr-1" onclick="birme.save_all(true);">
            打包为zip文件
          </button>
        </div>
        <div class="w-50 pl-1">
          <button type="button" class="btn btn-primary btn-sm w-100" onclick="birme.save_all(false);">保存文件</button>
        </div>
      </div>
      <div class="d-flex">
        <a class="btn btn-sm btn-remove w-50" href="javascript:document.location.reload()">移除全部</a>
        <a class="btn btn-sm btn-reset w-50" href="javascript:config.load(true)">恢复默认设置</a>
      </div>
    </div></div>
    <div class="section section-about">
      <div class="content col-md-6 offset-md-3 col-xl-4 offset-xl-4">
        <h2>关于</h2>
        <p>本项目基于开源项目 <a href="https://github.com/livelifebythecode/birme-sd-variant" target="_blank">Birme Variant for Stable Diffusion</a> 修改而来，新增了为每张图片单独设置分辨率的功能，也将英文文本翻译成中文，更加适应国内环境。</p>
        <p>炼丹必备--图片自动打标软件 (<a href="https://www.bilibili.com/video/BV1H5fYYUEoy/?vd_source=6bfaf74d3a14675a3ed0cd00c4a8a991">辣椒炒肉图片打标器</a>)</p>
      </div>
    </div>
    <div class="modal">
      <div class="loading">
        <?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0"
          width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve">
          <g>
            <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="#000000"
              fill-opacity="1" />
            <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1400ms" repeatCount="indefinite"></animateTransform>
          </g>
        </svg>
        <br />
        处理中...
      </div>
      <div class="wm">
        <div class="wm-preview">
          <img src=static/images/watermark.webp class="w-100" />
          <div class="text"></div>
          <div class="image"></div>
        </div>
        <div class="wm-settings p-4">
          <div class="icon icon-delete " onclick="birme.hide_modal()"></div>
          <div class="form-group">
            <label for="wm_text">水印文本</label>
            <input type="text" class="form-control" id="wm_text" name="wm_text" placeholder="" onkeyup="config.update(this)" />
          </div>
          <div class="form-group">
            <label for="wm_font">字体</label>
            <select type="select" class="form-control" id="wm_font" name="wm_font" onchange="config.update(this)">
              <option value="sans-serif">Arial/Helvetica</option>
              <option value="serif">Times New Roman</option>
              <option value="cursive">Cursive/Script</option>
            </select>
          </div>
          <div class="form-group">
            <label for="wm_size">字体大小</label>
            <input type="number" min="5" max="100" id="wm_size" name="wm_size" onchange="config.update(this)">
          </div>
          <hr />
          <h3 class="text-center"> Or </h3>
          <div class="form-group text-center">
            <div class="btn-browse btn btn-primary" style="position: relative;">
              <input type="file" class="inputfile" onchange="config.upload_wm(event)" />
              <label><span>上传一张水印图片</span></label>
            </div>
            <div class="wm_image">
            </div>
          </div>
        </div>
      </div>
    </div>


    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/5.16.0/load-image.all.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smartcrop/2.0.5/smartcrop.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
    <script src="js/hermite.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>